.tasks{
    & > div {
        width: 16.5%;
        height: 100%;
        float: left;
        background-color: #eee;
        border-radius: 4px;

        &.open{
            background-color: grey;
        }
    }
    & > div:not(:first-child){
        margin-left: 0.2%;
    }
    .status-content{
        padding: 4px 2px;
    }
    .task{
        border: 2px solid lightgrey;
        border-left: 4px solid lightgreen;
        height: 60px;
        background-color: white;
        border-radius: 6px;
        padding-top: 8px;
        padding-left: 4px;
        &.selected{
            border-left: 4px solid red;
        }
        & > div{
            width: 100%;
            height: 36%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.task-details{
    position: fixed;
    border: 2px solid gray;
    border-radius: 5px;
    background-color: #ffffff;
    width: 50%;
    margin: auto;
    top: 10%;
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 2;
    table{
        width: 100%;
        margin-bottom: 40px;
        select{
            width: 40%;
            height: 25px;
        }
        input{
            width: 80%;
            height: 25px;
        }
        textarea{
            width: 80%;
        }
        th:first-child{
            width: 22%;
        }
        td{
            &:first-child{
                text-align: right;
            }
            padding: 4px 10px;
        }
    }
    .control{
        margin-top: 10px;
        height: 30px;
        button{
            border: 0px;
            background-color: blue;
            color: #ffffff;
            width: 80px;
            height: 30px;
            float: right;
            margin-right: 10px;
        }
    }
}

#bcMark{
    width: 100%;
    height: 100%;
    background-color: lightgrey;
    position: fixed;
    z-index: 1;
    display: none;
    opacity: 0.5;
}